<!-- actQuery-->
<!-- actQuery -->
<template>
  <div class="actQuery content_box">
    <div class="flex">
      <div class="m-b-2" v-if="hasBtn('actQuery:query')">
        <div class="header_row flex align-center flex-wrap">
          <div class="flex align-center m-r-2">
            <span>管家名称：</span>
            <el-input v-model="searchObj.UserName" placeholder="请输入内容" clearable></el-input>
          </div>
          <div class="flex align-center m-r-2">
            <span>管家手机号码：</span>
            <el-input v-model="searchObj.UserPhone" placeholder="请输入内容" clearable></el-input>
          </div>
          <div class="flex align-center m-r-2">
            <span>管家推荐码：</span>
            <el-input v-model="searchObj.InCode" placeholder="请输入内容" clearable></el-input>
          </div>
          <div class="flex align-center m-r-2">
            <span>所属上级用户名：</span>
            <el-input v-model="searchObj.ParentUserName" placeholder="请输入内容" clearable></el-input>
          </div>
          <div class="flex align-center m-r-2">
            <span>所属上级手机号：</span>
            <el-input v-model="searchObj.ParentUserPhone" placeholder="请输入内容" clearable></el-input>
          </div>
          <div class="flex align-center m-r-2">
            <span>所属上级推荐码：</span>
            <el-input v-model="searchObj.ParentInCode" placeholder="请输入内容" clearable></el-input>
          </div>

        </div>
        <div v-show="showQuery" class="header_row flex align-center flex-wrap">

        </div>

        <div v-show="showQuery" class="header_row flex align-center flex-wrap">
        </div>

        <div v-show="showQuery" class="header_row flex align-center flex-wrap">
          <div class="flex align-center m-r-2">
            <span>激活状态：</span>
            <el-select v-model="searchObj.ActivateStatus" placeholder="请选择" clearable>
              <el-option v-for="item in ActivateStatusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="flex align-center m-r-2">
            <span>扣款状态：</span>
            <el-select v-model="searchObj.DeductStatus" placeholder="请选择" clearable>
              <el-option v-for="item in DeductStatusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>

          <div class="flex align-center m-r-2">
            <span>无需扣款日期时间区间：</span>
            <el-date-picker v-model="searchObj.NoDeductionsDate" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
            </el-date-picker>
          </div>
          <div class="flex align-center m-r-2">
            <span>激活日期时间区间：</span>
            <el-date-picker v-model="searchObj.ActivationDate" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
            </el-date-picker>
          </div>
          <div class="flex align-center m-r-2">
            <span>考核期时间区间：</span>
            <el-date-picker v-model="searchObj.ExamineTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
            </el-date-picker>
          </div>
          <div class="flex align-center m-r-2">
            <span>激活期时间区间：</span>
            <el-date-picker v-model="searchObj.ActivateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
            </el-date-picker>
          </div>
        </div>

        <el-button type="primary" @click="getListFun">查询</el-button>
      </div>
      <div>
        <el-button v-if="!showQuery" type="success" @click="showQuery = true">更多筛选<i class="el-icon-arrow-down el-icon--right"></i></el-button>
        <el-button v-else type="success" @click="showQuery = false">更多筛选<i class="el-icon-arrow-up el-icon--right"></i></el-button>
      </div>
    </div>

    <div class="m-b-1 neck_box flex align-center space-between">
      <div class="flex">
        <div class="font m-r-1">无激活数量: {{NoActivation}} 个</div>
        <div class="font m-l-2 m-r-1">激活中数量: {{ActiveNow}} 个</div>
        <div class="font m-l-2 m-r-1">已激活数量: {{YesActivation}} 个</div>
        <div class="font m-l-2 m-r-1">需扣款数量: {{NoDeductions}} 个</div>
        <div class="font m-l-2">无需扣款数量: {{YesDeductions}} 个</div>
      </div>
      <div>
        <!-- <el-button type="danger">批量删除</el-button> -->
        <el-button type="warning" disabled v-if="hasBtn('actQuery:export')">导出列表</el-button>
      </div>

    </div>
    <el-table :data="tableData" border ref="myTable" style="width: 100%" v-loading="listLoading">
      <el-table-column fixed prop="index" label="序号" width="80" align="center">
      </el-table-column>

      <el-table-column prop="UserName" label="管家名称" align="center">
      </el-table-column>
      <el-table-column prop="UserPhone" label="管家手机号码" align="center">
      </el-table-column>
      <el-table-column prop="InCode" label="管家推荐码" align="center">
      </el-table-column>

      <el-table-column prop="ParentUserName" label="所属上级用户名" align="center">
      </el-table-column>
      <el-table-column width="150" prop="ParentUserPhone" label="所属上级手机号码" align="center">
      </el-table-column>

      <el-table-column prop="ParentInCode" label="所属上级推荐码" align="center">
      </el-table-column>
      <el-table-column prop="OrgName" label="所属公司" align="center">
      </el-table-column>
      <el-table-column prop="ActivateStartTime" label="激活开始时间" align="center">
      </el-table-column>
      <el-table-column prop="ActivateEndTime" label="激活结束时间" align="center">
      </el-table-column>
      <el-table-column label="激活状态" align="center">
        <template slot-scope="scope">{{scope.row.ActivateStatus|ActivateStatusFilters}}</template>
      </el-table-column>
      <el-table-column prop="ActivateTime" label="激活日期" align="center">
      </el-table-column>
      <el-table-column prop="ExamineStartTime" label="考核开始时间" align="center">
      </el-table-column>
      <el-table-column prop="ExamineEndTime" label="考核结束时间" align="center">
      </el-table-column>
      <el-table-column label="扣款状态" align="center">
        <template slot-scope="scope">{{scope.row.DeductStatus|DeductStatusFilters}}</template>
      </el-table-column>
      <el-table-column prop="NoDeductTime" label="无需扣款日期" align="center">
      </el-table-column>
      <el-table-column prop="RegisterTime" label="注册时间" align="center">
      </el-table-column>
    </el-table>
    <div class="m-t-2 flex flex-end">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchObj.currentPage" :max-height="tableHeight" :page-size="searchObj.pageSize" :page-sizes="[10, 20, 50, 100, 200]" layout="total,sizes, prev, pager, next, jumper" :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { getDataList } from '@/api/dataManage/ActivateView'
  export default {
    //import引入的组件需要注入到对象中才能使用
    name: 'actQuery',
    components: {},
    data() {
      //这里存放数据
      return {
        ActiveNow: 0,
        YesActivation: 0,
        NoActivation: 0,
        YesDeductions: 0,
        NoDeductions: 0,
        ActivateStatusList: [
          { label: '未开始', value: 'NotStarted' },
          { label: '考核中', value: 'Assessing' },
          { label: '未激活', value: 'NoStandard' },
          { label: '已激活', value: 'YesStandard' },
        ],
        DeductStatusList: [
          { label: '未开始', value: 'NotStarted' },
          { label: '考核中', value: 'Assessing' },
          { label: '需扣款', value: 'NoStandard' },
          { label: '无需扣款', value: 'YesStandard' },
        ],
        listLoading: true,
        showQuery: false,
        tableHeight: 0,
        idOptions: [],
        searchObj: {
          idName: "",
          idLevl: "",
          timeValue: "",
          currentPage: 1,
          pageSize: 10,
        },
        pageTotal: 0,
        tableData: [
          { UpdateDate: 1, name: '测试' }
        ]
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    filters: {
      DeductStatusFilters(val) {
        if (val == 'Assessing') {
          val = '考核中'
        }
        if (val == 'YesStandard') {
          val = '无需扣款'
        }
        if (val == 'NoStandard') {
          val = '需扣款'
        }
        if (val == 'NotStarted') {
          val = '未开始'
        }
        return val
      },
      ActivateStatusFilters(val) {
        if (val == 'Assessing') {
          val = '考核中'
        }
        if (val == 'YesStandard') {
          val = '已激活'
        }
        if (val == 'NoStandard') {
          val = '未激活'
        }
        if (val == 'NotStarted') {
          val = '未开始'
        }
        return val
      }
    },
    //方法集合
    methods: {
      handleCurrentChange() { },
      //计算汇总
      // getSummaries(param) {
      //   //这个页面需要汇总 已激活数量 激活中数量  激活失败数量  下面逻辑要改
      //   const { columns, data } = param;
      //   const sums = [];
      //   columns.forEach((column, index) => {
      //     if (index === 0) {
      //       sums[index] = '汇总';
      //       return;
      //     }
      //     const values = data.map(item => Number(item[column.property]));
      //     if (!values.every(value => isNaN(value))) {
      //       sums[index] = values.reduce((prev, curr) => {
      //         const value = Number(curr);
      //         if (!isNaN(value)) {
      //           return prev + curr;
      //         } else {
      //           return prev;
      //         }
      //       }, 0);
      //       sums[index] += ' 元';
      //     } else {
      //       sums[index] = '';
      //     }
      //   });

      //   return sums;
      // },
      handleSizeChange(val) {
        this.searchObj.pageSize = val
        this.getListFun()
      },
      handleCurrentChange(val) {
        this.searchObj.currentPage = val
        this.getListFun()
      },
      async getListFun() {
        this.NoDeductions = 0
        this.YesDeductions = 0
        this.ActiveNow = 0
        this.YesActivation = 0
        this.NoActivation = 0
        this.listLoading = true
        this.tableData = []
        const that = this
        const obj = {
          "UserName": this.searchObj.UserName, //用户名称
          "UserPhone": this.searchObj.UserPhone, //管家手机号码
          "InCode": this.searchObj.InCode, //推荐码
          "ParentUserName": this.searchObj.ParentUserName, //所属上级用户名
          "ParentUserPhone": this.searchObj.ParentUserPhone, //所属上级手机号码
          "ParentInCode": this.searchObj.ParentInCode, //所属上级推荐码
          "OrgName": this.searchObj.OrgName, //所属公司
          "ActivateStatus": this.searchObj.ActivateStatus, //激活状态
          "DeductStatus": this.searchObj.DeductStatus, //考核状态
          "ActivateStartTime": null, //激活开始时间
          "ActivateEndTime": null, //激活结束时间
          "ExamineStartTime": null, //考核开始时间
          "ExamineEndTime": null, //考核结束时间
          "ActivationStartDate": null, //激活日期开始时间
          "ActivationEndDate": null, //激活日期结束时间
          "NoDeductionsStartDate": null, //无需扣款日期开始时间
          "NoDeductionsEndDate": null, //无需扣款日期结束时间
          "PageIndex": this.searchObj.currentPage,
          "PageSize": this.searchObj.pageSize,
        }
        if (this.searchObj.ActivateTime) {
          obj.StartTime = this.searchObj.ActivateTime[0]
          obj.EndTime = this.searchObj.ActivateTime[1]
        }
        if (this.searchObj.ExamineTime) {
          obj.StartTime = this.searchObj.ExamineTime[0]
          obj.EndTime = this.searchObj.ExamineTime[1]
        }
        if (this.searchObj.ActivationDate) {
          obj.StartTime = this.searchObj.ActivationDate[0]
          obj.EndTime = this.searchObj.ActivationDate[1]
        }
        if (this.searchObj.NoDeductionsDate) {
          obj.StartTime = this.searchObj.NoDeductionsDate[0]
          obj.EndTime = this.searchObj.NoDeductionsDate[1]
        }
        const { Data, Total } = await getDataList(obj)
        if (Data) {
          Data.forEach(item => {
            for (let cell in item) {
              if (!item[cell] && this.$getType(item[cell]) !== 'Number') {
                item[cell] = '-'
              }
            }
          })

          const data = Data.map((item, index) => {
            return { ...item, index: (index + 1) + ((that.searchObj.currentPage - 1) * that.searchObj.pageSize) }
          })
          const NoDeductions = Data.filter(item => item.DeductStatus == 'NoStandard') //需扣款人数汇总
          this.NoDeductions = NoDeductions.length
          const YesDeductions = Data.filter(item => item.DeductStatus == 'YesStandard') //无需扣款人数汇总
          this.YesDeductions = YesDeductions.length
          const ActiveNow = Data.filter(item => item.ActivateStatus == 'Assessing')  //激活中人数汇总
          this.ActiveNow = ActiveNow.length
          const YesActivation = Data.filter(item => item.ActivateStatus == 'YesStandard') //已激活人数汇总
          this.YesActivation = YesActivation.length
          const NoActivation = Data.filter(item => item.ActivateStatus == 'NoStandard') //未激活人数汇总
          this.NoActivation = NoActivation.length

          this.tableData = data || []
        }
        this.listLoading = false
        this.pageTotal = Total || 0
      }

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.getListFun()
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - this.$refs.myTable.$el.offsetTop - 150;
      })
      window.onresize = () => {
        this.tableHeight = window.innerHeight - this.$refs.myTable.$el.offsetTop - 150;
      }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
//@import url(); 引入公共css类
<style  scoped>
  .flex-end {
    justify-content: flex-end;
  }
  .font {
    font-size: 20px;
    font-weight: 500;
  }
</style>